<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <!-- 基本信息区域 -->
      <div class="mb-6">
        <h2 class="text-lg font-medium mb-4 text-[var(--color-text-1)]">基本信息</h2>
        <a-form
            ref="formRef"
            :model="form"
            :rules="rules"
            auto-label-width
            layout="vertical"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="provinceQuantity" label="省级公益林指标亩数" required>
                <a-input v-model="form.provinceQuantity" placeholder="请输入省级公益林指标亩数"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="tradeQuantity" label="省级公益林指标交易量">
                <a-input v-model="form.tradeQuantity" placeholder="请输入省级公益林指标交易量"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 按钮区域 -->
      <div class="flex justify-center mt-6">
        <a-space>
          <a-button type="primary" @click="onSubmit">提交</a-button>
          <a-button @click="onCancel">取消</a-button>
        </a-space>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {
  addProvinceIndexApi,
  getProvinceIndexByProvinceIndexIdApi,
  updateProvinceIndexByProvinceIndexIdApi
} from "~/api/lindi/provinceIndex.js";

// 定义props
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emit
const emit = defineEmits(["ok", "cancel"]);

// 全局实例
const {proxy} = getCurrentInstance();

// 表单ref
const formRef = ref(null);

// 加载状态
const spinLoading = ref(false);

// 表单数据
const form = reactive({
  provinceIndexId: null,
  provinceQuantity: "",
  tradeQuantity: "",
});

// 表单校验规则
const rules = {
  provinceQuantity: [{required: true, message: "省级公益林指标亩数不能为空"}],
};

// 组件挂载完成后执行
onMounted(() => {
  // 如果是修改操作，加载数据
  if (props.params.operationType === proxy.operationType.update.type) {
    loadProvinceIndexInfo(props.params.provinceIndexId);
  }
});

// 加载省级指标信息
function loadProvinceIndexInfo(provinceIndexId) {
  spinLoading.value = true;
  getProvinceIndexByProvinceIndexIdApi(provinceIndexId).then(res => {
    // 数据赋值
    if (res) {
      for (let key in res) {
        if (form.hasOwnProperty(key)) {
          form[key] = res[key];
        }
      }
    }
  }).finally(() => {
    spinLoading.value = false;
  });
}

// 提交表单
function onSubmit() {
  // 表单验证
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
    }
    
    // 添加
    if (props.params.operationType === proxy.operationType.add.type) {
      spinLoading.value = true;
      addProvinceIndexApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.add.success);
        emit("ok");
      }).finally(() => {
        spinLoading.value = false;
      });
    }
    
    // 修改
    if (props.params.operationType === proxy.operationType.update.type) {
      spinLoading.value = true;
      updateProvinceIndexByProvinceIndexIdApi(form).then(() => {
        proxy.$msg.success(proxy.operationType.update.success);
        emit("ok");
      }).finally(() => {
        spinLoading.value = false;
      });
    }
  });
}

// 取消
function onCancel() {
  emit("cancel");
}
</script>